<template>
  <div v-loading="loading">
    <!-- 搜索结果 -->
    <el-table :expand-row-keys="expands"
              :row-key="getRowKeys"
              ref="table"
              style="width: 100%;height: 550px;overflow = auto;"
              :data="tableData"
              border="true">
      <template #empty>
        <el-empty v-show="tableData.length == 0"
                  description="空空如也" />
      </template>
      <el-table-column align="center"
                       prop="goodsId"
                       label="ID"></el-table-column>
      <el-table-column align="center"
                       prop="goodsOutId"
                       label="商品编号"></el-table-column>
      <el-table-column align="center"
                       prop="goodsName"
                       label="商品名称"></el-table-column>
      <el-table-column align="center"
                       prop="goodsNum"
                       label="商品库存"></el-table-column>
      <el-table-column align="center"
                       prop="goodsPrice"
                       label="商品价格"></el-table-column>
      <el-table-column align="center"
                       prop="goodsDes"
                       label="商品描述"></el-table-column>
      <el-table-column align="center"
                       fixed="right">
        <template #header>
          <div style="display: flex;align-items: center;justify-content: center;">
            商品图片
            <!-- 刷新 -->
            <el-icon class="pointer"
                     style="font-size: 28px;margin-left: 10px;"
                     @click="getGoods">
              <Refresh color="#79bbff" />
            </el-icon>
          </div>
        </template>
        <template #default="scope">
          <el-image style="width: 100px; height: 100px"
                    :src="scope.row.goodsImgurl"
                    :zoom-rate="2"
                    fit="cover"
                    hide-on-click-modal="true"
                    loading="lazy"
                    preview-teleported="true"
                    :preview-src-list="[scope.row.goodsImgurl]">
          </el-image>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
  
<script>
import request from '@/utils/request'
import {
  ArrowLeft,
  ArrowRight,
  Refresh,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
export default {
  props: ['admin'],
  components: {
    ArrowLeft,
    ArrowRight,
    Refresh,
    Delete,
    Edit,
  },
  data() {
    return {
      tableData: [
        {
          goodsId: 1,
          goodsOutId: '4231313414141231312',
          goodsName: '哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈',
          goodsNum: 10,
          goodsPrice: 10.3,
          goodsDes: '红红火火恍恍惚惚哈哈哈哈哈',
          goodsImgurl:
            'https://img30.360buyimg.com/pop/s1180x940_jfs/t1/218801/12/26835/61382/6475ec74F4ff4685f/5c104318cedd7596.jpg.webp',
        },
      ],
      loading: false, // 加载弹窗
    }
  },
  created() {
    this.getGoods()
  },
  methods: {
    getGoods() {
      this.loading = true
      // this.$refs.table.setScrollTop(0)
      request.get('/api/getAllGoods').then((res) => {
        this.loading = false
        this.tableData = res
      })
    },
  },
}
</script>
<style scoped>
.pointer:hover {
  cursor: pointer;
}
</style>
  